<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水库管理系统 - 水库列表</title>
    <link rel="stylesheet" href="CSS/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>水库管理系统</h2>
        <div class="user-info">
            <span>欢迎回来，用户</span>
            <a href="LogoutServlet" class="btn">登出系统</a>
        </div>
    </div>

    <div class="content">
        <div class="actions">
            <button id="add-dam" class="btn">新建水库</button>
        </div>

        <div class="search-bar">
            <input type="text" id="search-name" placeholder="按水库名搜索">
            <input type="text" id="search-river" placeholder="按所属河流搜索">
            <button id="search-btn" class="btn">搜索</button>
        </div>

        <table id="dam-table">
            <thead>
            <tr>
                <th>水库名</th>
                <th>所属河流</th>
                <th>库容（亿立方米）</th>
                <th>建成时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过Ajax动态加载 -->
            </tbody>
        </table>
    </div>
</div>

<script>
    $(document).ready(function() {
        // 加载水库列表
        loadDams();

        // 搜索按钮点击事件
        $('#search-btn').click(function() {
            loadDams();
        });

        // 新建水库按钮点击事件
        $('#add-dam').click(function() {
            window.location.href = 'addDam.html';
        });

        // 加载水库列表函数
        function loadDams() {
            var name = $('#search-name').val();
            var river = $('#search-river').val();

            $.ajax({
                url: 'DamListServlet',
                type: 'GET',
                data: {
                    name: name,
                    river: river
                },
                success: function(data) {
                    var dams = JSON.parse(data);
                    var tbody = $('#dam-table tbody');
                    tbody.empty();

                    if (dams.length === 0) {
                        tbody.append('<tr><td colspan="5" style="text-align: center;">没有找到相关水库</td></tr>');
                        return;
                    }

                    $.each(dams, function(index, dam) {
                        var row = $('<tr></tr>');

                        row.append($('<td></td>').text(dam.name));
                        row.append($('<td></td>').text(dam.river));
                        row.append($('<td></td>').text(dam.capacity));
                        row.append($('<td></td>').text(dam.completeDate));

                        var actionCell = $('<td></td>');
                        var updateLink = $('<a></a>')
                            .attr('href', 'updateDam.html?id=' + dam.id)
                            .text('修改');
                        var deleteLink = $('<a></a>')
                            .attr('href', 'javascript:void(0)')
                            .attr('data-id', dam.id)
                            .text('删除')
                            .click(function() {
                                if (confirm('确定要删除该水库吗？')) {
                                    $.ajax({
                                        url: 'DeleteDamServlet',
                                        type: 'GET',
                                        data: {
                                            id: $(this).attr('data-id')
                                        },
                                        success: function(response) {
                                            var result = JSON.parse(response);
                                            if (result.success) {
                                                alert('删除成功！');
                                                loadDams();
                                            } else {
                                                alert('删除失败！');
                                            }
                                        },
                                        error: function() {
                                            alert('删除失败！');
                                        }
                                    });
                                }
                            });
                        actionCell.append(updateLink).append(' ').append(deleteLink);
                        row.append(actionCell);

                        tbody.append(row);
                    });
                },
                error: function() {
                    alert('加载水库列表失败！');
                }
            });
        }
    });
</script>
</body>
</html>